const React = require('react');
const ReactDOM = require('react-dom');
const Component = React.Component;
const Card = require('Card');
const Row = require('Row');
const Col = require('Col');
const Tile = require("./Tile");

class Page extends Component{
    componentDidMount (){
        for(let i in this.refs){
            let ref = this.refs[i];
            let block = ReactDOM.findDOMNode(ref);
            SyntaxHighlighter.highlight({}, block);
        }

        window.setTimeout(()=>{
            this.refs.card.setContent(<span>asdasd</span>);
        }, 1500);

    }

    render() {
        return (
            <div className="container">
                <Tile header={"使用方式"}>

                </Tile>
                <Tile header={"基本使用"}>
                    <Card title="Card Title" style={{ width: 300 }} tools={<a href="#">More</a>}>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>

                    <div style={{background: '#ECECEC', padding: '30px'}}>
                        <Card title="Card Title" style={{ width: 300 }} border={false}>
                            <p>Card content</p>
                            <p>Card content</p>
                            <p>Card content</p>
                            <p>Card content</p>
                        </Card>
                    </div>

                    <Card style={{ width: 300 }} className="mt-20">
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                        <p>Card content</p>
                    </Card>

                    <div style={{background: '#ECECEC', padding: '30px'}} className="mt-20">
                        <Row>
                            <Col grid={1/3}>
                                <Card title="Card Title">
                                    <p>Card content</p>
                                </Card>
                            </Col>
                            <Col grid={1/3}>
                                <Card title="Card Title">
                                    <p>Card content</p>
                                </Card>
                            </Col>
                            <Col grid={1/3}>
                                <Card title="Card Title">
                                    <p>Card content</p>
                                </Card>
                            </Col>
                        </Row>
                    </div>

                    <Card style={{ width: 240 }} bodyStyle={{ padding: 0 }} className="mt-20">
                        <div className="custom-image">
                            <img alt="example" width="100%" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
                        </div>
                        <div className="custom-card">
                            <h3>Europe Street beat</h3>
                            <p>www.instagram.com</p>
                        </div>
                    </Card>


                    <Card ref="card" title="Card Title" loadding={true} style={{ width: 240 }} className="mt-20">

                    </Card>
                </Tile>
            </div>
        )
    }
}

module.exports = Page;